<template>
  <div class="my">
    <div class="top">
      <div class="title">美团</div>
      <div class="tou">
        <div class="left">
          <div class="img">
            <img src="" alt="" />
          </div>
          <div class="text">
            <div class="zhang">TCL</div>
            <div class="phone">8208208820</div>
          </div>
        </div>
        <div class="shezhi">账户设置</div>
      </div>
      <div class="ka">
        <div class="k1">
          <span>收藏</span> <span>红包卡券</span> <span>足迹</span>
          <span>领现金</span>
        </div>
      </div>
    </div>

    <div class="three">
      <div class="red">
        <div class="r1">订单</div>
        <div class="r2">我的订单</div>
      </div>
      <div class="red">
        <div class="r1">8.9W</div>
        <div class="r2">借钱</div>
        <div class="r3">大约可借</div>
      </div>
      <div class="red">
        <div class="r1">红包</div>
        <div class="r2">待使用</div>
      </div>
      <div class="red">
        <div class="r1">余额</div>
        <div class="r2">待评价</div>
      </div>
      <div class="red">
        <div class="r1">余额</div>
        <div class="r2">退款/售后</div>
      </div>
    </div>
    <div class="money">
      <div>我的钱包</div>
      <div class="three">
        <div class="red">
          <div class="r1">8.9万</div>
          <div class="r2">借钱</div>
          <div class="r3">大约可借</div>
        </div>
        <div class="red">
          <div class="r1">1个</div>
          <div class="r2">美团月付</div>
          <div class="r3">先用后还服务</div>
        </div>
        <div class="red">
          <div class="r1">1个</div>
          <div class="r2">电炸锅未领</div>
          <div class="r3">近期申卡奖励</div>
        </div>
        <div class="red">
          <div class="r1">38.08元</div>
          <div class="r2">我的账单</div>
          <div class="r3">最近支付</div>
        </div>
      </div>
    </div>

    <div class="new">
      <div class="zuo">
        <h3>邀好友赚现金</h3>
        <div class="t1">最高得15元</div>
        <div class="ing">
          <img src="" alt="" />
        </div>
        <div class="div"><span>去邀请</span><span>查佣金</span></div>
      </div>
      <div class="zuo">
        <h3>美团服务号</h3>
        <div class="t1">关注后及时接受系统信息</div>
        <div class="ing">
          <img src="" alt="" />
        </div>
        <div class="div">
          <span>立即关注</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.my {
  background: #eee;
  font-size: 12px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.top {
  width: 100%;
  background: #ffd000;
}
.title {
  font-size: 18px;
  font-weight: 700;
  width: 100%;
  margin-left: 10px;
}
.tou {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-top: 10px;
}
.img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
  background: lightblue;
}
img {
  width: 100%;
  border-radius: 50%;
}
.zhang {
  font-size: 14px;
  font-weight: 700;
}
.shezhi {
  background-color: #d4b115a1;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
  margin-right: 15px;
}
.left {
  display: flex;
  align-items: center;
}
.ka {
  width: 100%;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.k1 {
  margin-bottom: 10px;
}
.k1 span {
  font-size: 16px;
  font-weight: 600;
  padding-right: 20px;
  margin-left: 9px;
}
.three {
  display: flex;
  justify-content: space-around;
  background: white;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
}
.red {
  text-align: center;
}
.r1 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.money {
  background: white;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 20px;
}
.money .three {
  display: flex;
  justify-content: space-around;
  background: white;
  border-radius: 10px;
  padding: 15px;
}
.money .red .r2 {
  font-size: 10px;
  font-weight: 600;
}
.new {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.zuo {
  width: 40%;
  background: white;
  border-radius: 10px;
  padding: 15px;
  line-height: 20px;
}
.zuo h3 {
  font-size: 16px;
}
.zuo .div {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.div span {
  padding: 2px 8px;
  border: 1px solid #ccc;
  border-radius: 20px;
}
.zuo .ing {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #eee;
  margin: 8px 0;
  border-radius: 10px;
}
</style>
